<template>
  <el-card class="small-card" :body-style="{ padding: '0px' }" shadow="hover">
    <div class="wrapper">
      <img :src="blog.cover" class="image" />
    </div>

    <div class="content">
      <div class="title">{{ blog.title }}</div>
    </div>
    <div class="card-bottom clearfix">
      <div class="span fl">{{ blog.username }}</div>
      <div class="span fr">
        <svg t="1685282469766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4748" width="18" height="18"><path d="M512.002844 170.666667c234.723556 0 433.607111 223.971556 500.679112 309.048889a51.683556 51.683556 0 0 1 0 64.568888C945.609956 629.361778 746.7264 853.333333 512.002844 853.333333S78.395733 629.361778 11.323733 544.284444a51.683556 51.683556 0 0 1 0-64.568888C78.395733 394.638222 277.279289 170.666667 512.002844 170.666667z m0 183.808c-62.122667 0-118.129778 38.371556-141.880888 97.251555-23.779556 58.88-10.638222 126.606222 33.28 171.662222a150.755556 150.755556 0 0 0 167.367111 34.133334C628.169956 633.173333 665.602844 575.715556 665.602844 512c0-87.011556-68.750222-157.525333-153.571555-157.525333z" fill="#959595" p-id="4749"></path></svg>
        <span>{{ blog.viewCount }}</span>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'SmallCard',
  props: [
    'blog'
  ],
  created() {
    console.log(this.blog)
  },
  methods: {

  }

}
</script>

<style lang="less" scoped>
.small-card {
  width: 275px;
  height: 280px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;

  .wrapper {
    width: 275px;
    height: 185px;
    overflow: hidden;

    .image {
      width: 275px;
      height: 185px;
      aspect-ratio: auto 275 / 185;
      object-fit: fill;
      transition: all 0.6s ease;

    }

  }

  .wrapper:hover .image {
    // width: 275px;
    // height: 185px;
    transform: scale(1.5);
  }



  .content {
    padding: 10px 18px;

    .title {
      font-weight: 600;
      font-size: 16px;
      height: 36.8px;
      color: #323232;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }

  .card-bottom {
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;


    .fl {
      font-size: 16px;
      color: #636363;
    }

    .fr {
      font-size: 16px;
      color: #959595;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        margin-left: 5px;
      }
    }
  }
}</style>